import React,{useEffect,useState} from 'react'
import Pagecomponent from './Pagecomponent';

var pageNum;
const Eat = () => {
    const [dataList, setDataList] = useState([]);
    const [totalPage, setTotalPage] = useState(15);

    const [eat,setEat] = useState([]);

    useEffect(()=>{
        fetch(`https://api.124ss.xyz:2355/endeat?rand=$1`,{
          method: "GET",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          }
    
        }).then(res => {
          return res.json();
        })
        .then(res =>{
            var arr = [];
            var eatObj = [];
            res.forEach((item,index) => {
                eatObj = [
                    item['food_id'],
                    item['food_image'],
                    item['food_name'],
                    item['food_material'],
                    item['food_step']
                ]
                arr.push(eatObj)
            } )
            setEat(arr)
        })
        .catch((err)=>{
          console.log("err:",err);
        })
      },[]
    )

    const DelItem = (idx,item) => {
  
        fetch(`https://api.124ss.xyz:2355/enddelEat/${item[0]}`,{
          method: "delete",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          },
          body: JSON.stringify({
            food_id: item[0]
          })
    
        }).then(res => {
          return res.text();
        })
        .then(res =>{
          console.log(res)
        } )
        .catch((err)=>{
          console.log("err:",err);
        })
    
        let newEat = eat.filter((_,index)=>idx!=index);
        setEat(newEat);
    
      }

    const getCurrentPage = (currentPage) => {
        setDataList(eat[currentPage-1])
        pageNum = currentPage;
      }
    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th style={{paddingLeft: 20, fontSize: 18, fontFamily: 'SimSun'}}></th>
                        <th style={{paddingLeft: 40, fontSize:18, fontFamily: 'SimSun'}}>菜名</th>
                        <th style={{paddingLeft: 40, fontSize: 18, fontFamily: 'SimSun'}}>食材</th>
                        <th style={{paddingLeft: 40, fontSize: 18, fontFamily: 'SimSun'}}>步骤</th>
                        <th style={{paddingLeft: 40, fontSize: 18, fontFamily: 'SimSun'}}>操作</th>
                    </tr>
                </thead>
                <tbody>
                {
                    eat.slice(3*(pageNum-1),3*pageNum).map((item, index) =>
                    <tr>
                        <td style={{paddingTop: 20,paddingLeft: 20, textAlign: 'center'}}>
                            <img style={{width: 100, height: 100}} src={'https://api.124ss.xyz:2355/images/' + item[1]} />
                        </td>
                        <td style={{paddingTop: 20,paddingLeft: 40, textAlign: 'center',fontSize: 10}}>{item[2]}</td>
                        <td style={{paddingTop: 20,paddingLeft: 40,fontSize: 10,textAlign: 'center'}}>{item[3]}</td>
                        <td style={{paddingTop: 20,paddingLeft: 40,fontSize: 10,textAlign: 'center'}}>{item[4]}</td>
                        <td style={{paddingTop: 20,paddingLeft: 40}}>
                            <button onClick={() => DelItem(index,item)}>
                                删除
                            </button>
                        </td>
                    </tr>)
                }
                </tbody>
            </table>
            <div style={{position: 'absolute', bottom: 15, left:510}}>
        <Pagecomponent totalPage={totalPage} pageCallbackFn={getCurrentPage}/>
      </div>
        </div>
    )
}

export default Eat
